<template>
  <div>
    <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="135">
      <FormItem label="AppId">
        <Input disabled v-model="formItem.appId" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="开发者">
        <Select v-model="formItem.developerId"  clearable>
          <Option
            :key="index"
            v-for="(item,index) in selectUsers"
            @click.native="handleOnSelectUser(item)"
            :value="item.userId">
            {{ item.userName }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="应用名称" prop="appName">
        <Input v-model="formItem.appName" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="英文名称" prop="appNameEn">
        <Input v-model="formItem.appNameEn" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="应用类型" prop="appType">
        <Select v-model="formItem.appType" @on-change="handleOnAppTypeChange">
          <Option value="server">服务器应用</Option>
          <Option value="app">手机应用</Option>
          <Option value="pc">PC网页应用</Option>
          <Option value="wap">手机网页应用</Option>
        </Select>
      </FormItem>
      <FormItem v-if="formItem.appType === 'app'" prop="appOs" label="操作系统">
        <RadioGroup v-model="formItem.appOs">
          <Radio label="ios">
            <Icon type="logo-apple"></Icon>
            <span>苹果IOS</span>
          </Radio>
          <Radio label="android">
            <Icon type="logo-android"></Icon>
            <span>安卓Android</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="应用官网" prop="website">
        <Input v-model="formItem.website" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="状态">
        <RadioGroup v-model="formItem.status" type="button">
          <Radio :label="0">禁用</Radio>
          <Radio :label="1">正常</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="描述">
        <Input v-model="formItem.appDesc" type="textarea" placeholder="请输入内容"></Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'AppInfo',
  data () {
    const validateEn = (rule, value, callback) => {
      const reg = /^[-_a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('名称不能为空'))
      } else if (value !== '' && !reg.test(value)) {
        callback(new Error('只允许字母、数字、下划线、-'))
      } else {
        callback()
      }
    }
    return {
      isAdd: true,
      selectUsers: [],
      formItemRules: {
        website: [
          { type: 'url', message: '请输入有效网址', trigger: 'blur' }
        ],
        appType: [
          { required: true, message: '应用类型不能为空', trigger: 'blur' }
        ],
        appOs: [
          { required: true, message: '操作系统不能为空', trigger: 'blur' }
        ],
        appName: [
          { required: true, message: '应用名称不能为空', trigger: 'blur' }
        ],
        appNameEn: [
          { required: true, validator: validateEn, trigger: 'blur' }
        ]
      },
      formItem: this.getFormItem()
    }
  },
  methods: {
    getFormItem () {
      return {
        appId: '',
        apiKey: '',
        secretKey: '',
        appName: '',
        appNameEn: '',
        appType: 'server',
        appIcon: '',
        appOs: '',
        website: '',
        appDesc: '',
        status: 1,
        developerId: ''
      }
    },
    setData (data) {
      this.isAdd = true
      if (data && data.appId) {
        Object.assign(this.formItem, {
          appId: data.appId,
          apiKey: data.apiKey,
          secretKey: data.secretKey,
          appName: data.appName,
          appNameEn: data.appNameEn,
          appType: data.appType,
          appIcon: data.appIcon,
          appOs: data.appOs,
          website: data.website,
          appDesc: data.appDesc,
          status: data.status,
          developerId: data.developerId
        })
        this.isAdd = false
      } else {
        this.formItem = this.getFormItem()
      }
      this.handleLoadUsers()
    },
    handleReset () {
      this.$refs['form'].resetFields()
      this.formItem = this.getFormItem()
    },
    handleSubmit () {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http.post(this.$apis.app.save, this.formItem, this).then(res => {
              resolve(res)
            }).catch(function (err) {
              reject(err)
            })
          } else {
            resolve(false)
          }
        })
      })
    },
    handleOnAppTypeChange (data) {
      if (data !== 'app') {
        this.formItem.appOs = ''
      } else {
        if (!this.formItem.appOs) {
          this.formItem.appOs = 'ios'
        }
      }
    },
    handleLoadUsers () {
      this.$http.get(this.$apis.developer.list, {}, this).then(res => {
        this.selectUsers = res.data
      })
    },
    handleOnSelectUser (data) {
      this.formItem.developerId = data.userId
    }
  },
  mounted: function () {
  }
}
</script>
